<template>
  <layout>
    <uv-navbar :fixed="false" :title="title" left-arrow @leftClick="$onClickLeft"/>
    <view class="container">
      <view style="padding: 0 30rpx;">
        <!-- 用户信息区域开始 -->
        <view class="d-flex flex-column bg-white user-box">
          <view class="d-flex align-items-center">
            <view class="avatar rounded-circle">
              <image
                  :src="isLogin ? member.avatar ? member.avatar : '/static/images/mine/default.png' : '/static/images/mine/default.png'">
              </image>
            </view>
            <view class="d-flex flex-column flex-fill overflow-hidden" style="margin-top: 20rpx;">
              <!-- 登录状态下显示昵称和跳转按钮 -->
              <view v-if="isLogin"
                    class="font-size-lg font-weight-bold d-flex justify-content-start align-items-center"
                    @tap="serv({type:'pages',pages:'/pages/components/pages/mine/userinfo'})">
                <view class="text-truncate">{{ member.nickname }}</view>
                <view class="iconfont iconarrow-right line-height-100"></view>
              </view>
              <!-- 未登录状态下显示游客并跳转登录页面 -->
              <view v-else class="font-size-lg font-weight-bold" @tap="login">游客</view>
            </view>
          </view>
        </view>
        <!-- 用户信息区域结束 -->

      </view>
    </view>
  </layout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { userGetUserInfo, mineService } from '@/api/user'

const main = useMainStore()
const { member, isLogin } = storeToRefs(main)

const title = ref('个人中心')
const services = ref([])

onShow(() => {
  getUserInfo();
  getServices();
})

// 获取用户信息
const getUserInfo = async () => {
  if (isLogin.value) {
    let data = await userGetUserInfo();
    if (data.user_info) {
      main.SET_MEMBER(data.user_info);
    }
  }
}

// 获取服务列表
const getServices = async () => {
  if (isLogin.value) {
    let data = await mineService();
    if (data) {
      services.value = data.list;
    }
  }
}

// 拨打电话
const makePhoneCall = (phoneNumber) => {
  uni.makePhoneCall({
    phoneNumber: phoneNumber,
  })
}

// 跳转登录页面
const login = () => {
  uni.navigateTo({
    url: '/pages/components/pages/login/login'
  })
}

// 根据服务类型进行不同的操作
const serv = (item) => {
  switch (item.type) {
    case 'pages':
      if (!isLogin.value) {
        login()
        return
      }
      uni.navigateTo({
        url: item.pages
      })
      break;
    case 'miniprogram':
      uni.navigateToMiniProgram({
        appId: item.app_id
      })
      break;
    case 'menu':
      uni.navigateTo({
        url: '/pages/components/pages/mine/service?id=' + item.id + '&name=' + item.name
      })
      break;
    case 'content':
      uni.navigateTo({
        url: '/pages/components/pages/mine/content?id=' + item.id + '&name=' + item.name
      })
      break;
  }
}
</script>

<style lang="scss" scoped>
page {
  height: auto;
  min-height: 100%;
}

.user-box {
  position: relative;
  border-radius: 8rpx;
  margin-bottom: 30rpx;
  margin-top: 70rpx;
  box-shadow: $box-shadow;
}

.avatar {
  position: relative;
  margin-top: -35rpx;
  margin-left: 35rpx;
  margin-right: 35rpx;
  width: 160rpx;
  height: 160rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);

  image {
    width: 140rpx;
    height: 140rpx;
    border-radius: 100%;
  }
}

.user-grid {
  width: 25%;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .value {
    margin-bottom: 20rpx;
  }
}

.service-box {
  width: 100%;
  background-color: #FFFFFF;
  padding: 32rpx 30rpx 10rpx;
  box-shadow: $box-shadow;

  .row {
    display: flex;
    flex-wrap: wrap;
    color: $text-color-assist;
    font-size: $font-size-sm;
    padding-bottom: -40rpx;

    .grid {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 40rpx;
      width: 25%;
      position: relative;

      image {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 20rpx;
      }
    }
  }
}
</style>
